<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>{{userName}}</p>
    <p>{{userPassword}}</p>
    <input type="text" v-model="userName">
    <input type="text" v-model="userPassword">
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>
  <script src="../../javascript//vue.js"></script>
  <script>
    /*
    v-model可以让数据和视图实现双向绑定,数据变化视图自动更新，视图变化数据随之更新
    v-model
      预期：随表单控件类型不同而不同。
      限制：
         <input> <select> <textarea> components
      修饰符：
        .lazy - 取代 input 监听 change 事件
        .number - 输入字符串转为有效的数字
        .trim - 输入首尾空格过滤
      用法：在表单控件或者组件上创建双向绑定，在输入组件上使用自定义事件
     */
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          userName: "",
          userPassword: ""
        }
      },
      methods: {
        login() {
          const userInfo = { userName: this.userName, userPassword: this.userPassword }
          localStorage.setItem("userInfo", JSON.stringify(userInfo))
        },
        reset() {
          this.userName = ""
          this.userPassword = ""
        }
      }
    })
  </script>
</body>

</html>